<template>
  <div class="all">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="深色模式"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div>
      <van-cell
        title="跟随系统"
        size="large"
        label="开启后，将跟随系统打开或关闭深色模式"
      >
        <van-switch
          size="22px"
          inactive-color="#DDDDDD"
          active-color="#09C161"
          v-model="checked"
        />
      </van-cell>
    </div>
    <div :style="show()">
      <div class="tword">手动选择</div>
      <div>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell
              size="large"
              title="普通模式"
              clickable
              @click="radio = '1'"
            >
              <template #right-icon>
                <van-radio checked-color="#09C161" name="1" />
              </template>
            </van-cell>
            <van-cell
              size="large"
              title="深色模式"
              clickable
              @click="radio = '2'"
            >
              <template #right-icon>
                <van-radio checked-color="#09C161" name="2" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      radio: "1",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    show() {
      if (this.checked) {
        return "display:none";
      } else {
        return "display:block";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  background-color: #eee;
  height: 100%;
  /deep/.van-cell {
    .van-cell__label {
      font-size: 13px;
      width: 240px;
    }
    .van-switch {
      margin-top: 12px;
    }
  }
  .tword {
    margin: 10px 15px 5px;
    font-size: 13px;
  }
}
</style>